import React, { Component } from 'react';
import {TabBar} from "antd-mobile"
import { withRouter } from 'react-router-dom';
import "../assets/font_icon/iconfont.css"
import {
    AppOutline,
    AaOutline,
    TruckOutline ,
    AppstoreOutline ,
    UserOutline ,
  } from 'antd-mobile-icons'
class Tabar extends Component {
    constructor(props){
     super(props)
     this.state={
        tabs : [
            {
              key: '/index/home',
              title: '首页',
              icon: <AppOutline />,
            },
            {
              key: '/index/cate',
              title: '分类',
              icon: <AaOutline />,
            },
            {
                key: '/index/goods',
                title: '全部商品',
                icon: <AppstoreOutline />,
              },
              {
                key: '/index/goodscart',
                title: '购物车',
                icon: <TruckOutline />,
              },
              {
                key: '/index/mine',
                title: '我的',
                icon: <UserOutline />,
              },
           
          ]
     }
    }
    handlclick(key){
      console.log(this.props);
      this.props.history.push(key)
    }
    render() {
        return (
            <div>
                <TabBar onChange={(key)=>{this.handlclick(key)}}  activeKey={this.props.location.pathname}>
          { this.state.tabs.map(item => (
            <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
          ))}
        </TabBar>
            </div>
        );
    }
}

export default withRouter(Tabar);